<template>
	
	
		<div style="width: 50%;margin-left: 20%;">
			<el-card>
				<div style="width: 100%;"><p style="text-align: center;">我的基本信息</p></div>
				<div style="margin-left: 18rem;">
					<el-form :model="data.user" :rules="rules" ref="formRef">
						<el-form-item style="height: 17rem;">
							<el-avatar style="width: 55%;height: 100%;">
							  <el-image :src="$ip+`/public/shows/`+data.user.pic" v-model="data.user.pic"/>
							</el-avatar>
						</el-form-item>
					<el-form-item  label="昵称:" prop="uname">
						<el-input v-model="data.user.uname" placeholder="昵称" :prefix-icon="Cellphone" style="width: 16rem;"/>
					</el-form-item>
					<el-form-item  label="账号:" prop="account">
					      <el-input v-model="data.user.account" placeholder="账号" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
					</el-form-item>
					<el-form-item  label="手机号:" prop="phone">
					      <el-input v-model="data.user.phone" placeholder="手机号" :prefix-icon="Cellphone" style="width: 15rem;" disabled=""/>
					</el-form-item>
					<el-form-item  label="密码:" prop="password">
					      <el-input v-model="data.user.password" placeholder="密码" :prefix-icon="Cellphone" style="width: 16rem;" disabled=""/>
					</el-form-item>
					
					<el-form-item  label="地址:" prop="address">
						  <el-input
						      v-model="data.user.address"
						      style="width: 16rem;"
						      :rows="6"
						      type="textarea"
						      placeholder="地址"
						  	:prefix-icon="UserFilled"
						    />
					</el-form-item>
					<el-button style="margin-left: 5%; background-color: #E1337F;color: aliceblue;"  @click="save()">
						<el-icon><Pointer /></el-icon>修改个人信息
					</el-button>
					
					</el-form>
				</div>
				
				
			</el-card>
		</div>
	
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../router/index.js"
		import store from "../store/index.js"
		import {Search,ShoppingCart,Plus,EditPen,UserFilled,Pointer} from '@element-plus/icons-vue'
		import bottom from "../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../store/alert.js'
		const data=reactive({
			user:{}
		})	
		
		
		function save(){
			let fd=new FormData();
			fd.append("uname",data.user.uname)
			fd.append("address",data.user.address)
			$postf("/user/updateUser",fd).then((read)=>{
				success(read.data.msg)
				let user=read.data.data
				store.state.user=user
				data.user=user
			})
			
			
		}
		
		onMounted(()=>{
			
			$get("/user/info").then((read)=>{
				data.user=read.data[1].data[1]
				
				
			})
			
		})
</script>

<style>
</style>
